<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>2048</title>
  <link rel="stylesheet" href="./styles/index.css">
</head>

<body>
  <!--最外部的大框 - 包裹游戏全局的大盒子 -->
  <div class="outermost">
    <!-- 顶部实时显示的游戏分数 -->
    <span class="top"><b>SCORE:<span id="score01"></span></b></span>
    <!-- 游戏大框框 2048游戏为四行四列因此需要16个div盒子 -->
    <div class="big">
      <div class="cell" id="c00"></div>
      <div class="cell" id="c01"></div>
      <div class="cell" id="c02"></div>
      <div class="cell" id="c03"></div>

      <div class="cell" id="c10"></div>
      <div class="cell" id="c11"></div>
      <div class="cell" id="c12"></div>
      <div class="cell" id="c13"></div>

      <div class="cell" id="c20"></div>
      <div class="cell" id="c21"></div>
      <div class="cell" id="c22"></div>
      <div class="cell" id="c23"></div>

      <div class="cell" id="c30"></div>
      <div class="cell" id="c31"></div>
      <div class="cell" id="c32"></div>
      <div class="cell" id="c33"></div>
    </div>
    <!-- 游戏结束时会弹出的提示框 -->
    <div class="tips" id="gameover">
      <p>GAME OVER!!! <br>
        SCORE: <span id="score02">0</span><br>
        <button class="startbtn">重新开始</button>
      </p>
    </div>
    <!--重玩一遍-->
    <div class="foot">
      <button class="replay"><a>重玩一遍</a></button>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>